@model QueriesIndexViewModel
@{
    int startIndex = (Model.Pager.Page - 1) * (Model.Pager.PageSize) + 1;
    int endIndex = startIndex + Model.Queries.Count - 1;
}
<h1>@RenderTitleSegments(T["Queries"])</h1>
<form asp-action="Index" method="post">
    <input type="submit" name="submit.Filter" id="submitFilter" class="d-none" />
    <div class="row">
        <div class="form-group col-xl-4 col-sm-6">
            <div class="input-group input-group-sm filter-options">
                <input id="search-box" asp-for="Options.Search" class="form-control" placeholder="@T["Search"]" type="search" autofocus />
            </div>
        </div>
        <div class="form-group col-xl-8 col-sm-6">
            <div class="btn-group float-right">
                <button type="button" class="btn btn-primary float-right" role="button" data-toggle="modal" data-target="#modalAddQuery">@T["Add Query"]</button>
            </div>
        </div>
    </div>
    @* the form is necessary to generate and antiforgery token for the delete action *@
    <ul class="list-group">
        <li class="list-group-item bg-light">
            <div class="row">
                <div class="form-group col-xl-4 mb-xl-n1">
                    <label id="items" for="select-all">@T.Plural(Model.Queries.Count, "1 item", "{0} items")<span class="text-muted" title="@T["Items {0} to {1}", startIndex, endIndex]">@T.Plural((int)Model.Pager.TotalItemCount, " / {0} item in total", " / {0} items in total")</span></label>
                    <label id="selected-items" class="text-muted" for="select-all"></label>
                </div>
            </div>
        </li>
        @if (Model.Queries.Any())
        {
            @foreach (var entry in Model.Queries)
            {
                <li class="list-group-item">
                    @await DisplayAsync(entry.Shape)
                </li>
            }
        }
        else
        {
            <li class="list-group-item">
                <div class="alert alert-info" role="alert">
                    @T["<strong>Nothing here!</strong> There are no queries for the moment."]
                </div>
            </li>
        }
    </ul>
</form>

@await DisplayAsync(Model.Pager)

<!-- Modal -->
<div class="modal fade" id="modalAddQuery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@T["Available Query Types"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if (!Model.QuerySourceNames.Any())
                {
                    <p class="p-3 mb-2 bg-warning text-white">@T["You need to enable a feature which provides a query source."] <a asp-action="Features" asp-controller="Admin" asp-area="OrchardCore.Features">@T["Go to Features"]</a></p>
                }
                else
                {
                    <div class="card-columns">

                        @foreach (var source in Model.QuerySourceNames)
                        {
                            OrchardCore.DisplayManagement.IShape shape = await New.Query_Link(Name: source);
                            shape.Metadata.Alternates.Add("Query_Link__" + source);

                            @await DisplayAsync(shape)
                        }
                    </div>
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">@T["Cancel"]</button>
            </div>
        </div>
    </div>
</div>

<script at="Foot" type="text/javascript">
    $(function () {
        $(".filter-options input").on("change", function () {
            $("[name='submit.Filter']").click();
        });
    });
</script>
